<script setup>
import {onMounted, ref} from "vue";
import {doGet} from "../http/httpRequest.js";
import * as echarts from 'echarts';

onMounted(() => {
  loadOverView();
  loadSaleFunel();
  loadCluePie();
  loadActivityBar();
  loadClueBar();
})

let overViewData = ref({})
//加载概览统计数据
const loadOverView = () => {
  doGet('/api/overview', {}).then(resp => {
    if (resp.data.code === 200) {
      overViewData.value = resp.data.data;
    }
  })
}

//加载销售漏斗图函数
const loadSaleFunel = () => {
  //先去后端把数据查询出来，然后再渲染图表
  doGet('/api/funel', {}).then(resp => {
    if (resp.data.code === 200) {
      //1、拿到显示图表的dom元素
      let chartDom = document.getElementById('funelChart');
      //2、初始化该dom元素得到myChart对象
      let myChart = echarts.init(chartDom);
      //3、配置图表该如何显示（配置可选项）
      let option = {
        //标题组件，包含主标题和副标题。
        title: {
          //主标题文本，支持使用 \n 换行。
          text: '销售漏斗图',
          //title组件离容器左侧的距离。
          left: 'center',
          //title 组件离容器上侧的距离。
          top: 'bottom'
        },
        //提示框组件。
        tooltip: {
          //触发类型，item：数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
          trigger: 'item',
          //提示框浮层内容格式器，支持字符串模板和回调函数两种形式，漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
          formatter: '{a} <br/>{b} : {c}%'
        },
        //图例组件
        legend: {
          //图例的数据数组
          data: ['线索', '客户', '交易', '成交']
        },
        //系列（必须指定是哪一种图表类型）
        series: [
          {
            //系列名称
            name: '销售数据统计',
            //图表的类型：漏斗图
            type: 'funnel',
            //漏斗图组件离容器左侧的距离
            left: '10%',
            //漏斗图组件离容器上侧的距离
            top: 60,
            //漏斗图组件离容器下侧的距离
            bottom: 60,
            //漏斗图组件的宽度。默认自适应
            width: '80%',
            //指定的数据最小值
            min: 0,
            //指定的数据最大值
            max: 100,
            //数据最小值 min 映射的宽度
            minSize: '0%',
            //数据最大值 max 映射的宽度
            maxSize: '100%',
            //数据排序， 可以取 'ascending'，'descending'，'none'（表示按 data 顺序）
            sort: 'descending',
            //数据图形间距
            gap: 2,
            //漏斗图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
            label: {
              //图形上的文本标签是否要显示
              show: true,
              //图形上的文本标签的位置
              position: 'inside'
            },
            //标签的视觉引导线样式
            labelLine: {
              length: 10,
              lineStyle: {
                width: 1,
                type: 'solid'
              }
            },
            //图形样式
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 1
            },
            //高亮的标签和图形样式
            emphasis: {
              label: {
                fontSize: 20
              }
            },
            //数据项，系列中的数据内容数组
            /*data: [
              //数据值, 数据项名称
              { value: 100, name: '线索' },
              { value: 70, name: '客户' },
              { value: 45, name: '交易' },
              { value: 18, name: '成交' }
            ]*/
            data: resp.data.data
          }
        ]
      };
      //4、如果配置了可选项，就把可选项设置到myChart对象中
      option && myChart.setOption(option);
    }
  })
}

//加载线索来源饼图数据
const loadCluePie = () => {
  //先去后端把数据查询出来，然后再渲染图表
  doGet('/api/pie', {}).then(resp => {
    if (resp.data.code === 200) {
      //1、拿到显示图表的dom元素
      let chartDom = document.getElementById('pieChart');
      //2、初始化该dom元素得到myChart对象
      let myChart = echarts.init(chartDom);
      //3、配置图表该如何显示（配置可选项）
      let option = {
        title: {
          text: '线索来源统计',
          //title组件离容器左侧的距离。
          left: 'center',
          //title 组件离容器上侧的距离。
          top: 'bottom'
        },
        //提示框组件
        tooltip: {
          //触发类型，item：数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
          trigger: 'item',
          //提示框浮层内容格式器，支持字符串模板和回调函数两种形式
          formatter: '{a} <br/>{b} : {c}个'
        },
        //图例组件
        legend: {
          orient: 'horizontal',
          left: 'center'
        },
        //系列
        series: [
          {
            //鼠标放上去的提示的标题
            name: '线索来源统计',
            //指定是哪一种类型的图
            type: 'pie',
            //饼图的半径
            radius: '55%',
            //高亮状态的扇区和标签样式
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            //数据项目的数据
            /*data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ]*/
            data: resp.data.data
          }
        ]
      };
      //4、如果配置了可选项，就把可选项设置到myChart对象中
      option && myChart.setOption(option);
    }
  })
}

//加载每月市场活动统计柱状图数据
const loadActivityBar = () => {
  //先去后端把数据查询出来，然后再渲染图表
  doGet('/api/activity/bar', {}).then(resp => {
    if (resp.data.code === 200) {
      //1、拿到显示图表的dom元素
      let chartDom = document.getElementById('barChart');
      //2、初始化该dom元素得到myChart对象
      let myChart = echarts.init(chartDom);
      //3、配置图表该如何显示（配置可选项）
      let option = {
        title: {
          text: '市场活动按月统计',
          //title组件离容器左侧的距离。
          left: 'center',
          //title 组件离容器上侧的距离。
          top: 'bottom'
        },
        //提示组件
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          //提示框浮层内容格式器，支持字符串模板和回调函数两种形式
          formatter: '{a} <br/>{b} : {c}个'
        },
        //直角坐标系内绘图网格
        grid: {
          left: '2%',
          right: '2%',
          bottom: '10%',
          //grid 区域是否包含坐标轴的刻度标签
          containLabel: true
        },
        //直角坐标系grid中的X轴
        xAxis: [
          {
            //'category'类目轴
            type: 'category',
            //类目数据
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            //坐标轴刻度相关设置
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        //直角坐标系grid中的Y轴
        yAxis: [
          {
            //'value'数值轴，适用于连续数据。
            type: 'value'
          }
        ],
        //系列
        series: [
          {
            name: '市场活动统计',
            //指定是哪一种类型的图表
            type: 'bar',
            barWidth: '35%',
            //数据项
            //data: [10, 0, 17, 22, 18, 0, 11]
            data: resp.data.data
          }
        ]
      };
      //4、如果配置了可选项，就把可选项设置到myChart对象中
      option && myChart.setOption(option);
    }
  })
}

const loadClueBar = () => {
  //先去后端把数据查询出来，然后再渲染图表
  doGet('/api/clue/bar', {}).then(resp => {
    console.log(resp)
    if (resp.data.code === 200) {
      //1、拿到显示图表的dom元素
      let chartDom = document.getElementById('clueBarChart');
      //2、初始化该dom元素得到myChart对象
      let myChart = echarts.init(chartDom);
      //3、配置图表该如何显示（配置可选项）
      let option = {
        title: {
          text: '线索按当月每天统计',
          //title组件离容器左侧的距离。
          left: 'center',
          //title 组件离容器上侧的距离。
          top: 'bottom'
        },
        //提示组件
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          //提示框浮层内容格式器，支持字符串模板和回调函数两种形式
          formatter: '{a} <br/>{b}号 : {c}个'
        },
        //直角坐标系内绘图网格
        grid: {
          left: '2%',
          right: '2%',
          bottom: '10%',
          //grid 区域是否包含坐标轴的刻度标签
          containLabel: true
        },
        //直角坐标系grid中的X轴
        xAxis: [
          {
            //'category'类目轴
            type: 'category',
            //类目数据
            //data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            data: resp.data.data.xdata,
            //坐标轴刻度相关设置
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        //直角坐标系grid中的Y轴
        yAxis: [
          {
            //'value'数值轴，适用于连续数据。
            type: 'value'
          }
        ],
        //系列
        series: [
          {
            name: '线索数据统计',
            //指定是哪一种类型的图表
            type: 'bar',
            barWidth: '35%',
            //数据项
            //data: [10, 0, 17, 22, 18, 0, 11]
            data: resp.data.data.ydata
          }
        ]
      };
      //4、如果配置了可选项，就把可选项设置到myChart对象中
      option && myChart.setOption(option);
    }
  })
}
</script>

<template>
  <!--概览统计-->
  <el-row>
    <el-col :span="6">
      <el-statistic :value="overViewData.onGingActivityCount">
        <template #title>
          <div style="display: inline-flex; align-items: center">
            市场活动
            <el-icon style="margin-left: 4px" :size="12">
              <Male />
            </el-icon>
          </div>
        </template>
        <template #suffix>/{{overViewData.totalActivityCount}}</template>
      </el-statistic>
    </el-col>

    <el-col :span="6">
      <el-statistic title="线索总数" :value="overViewData.totalClueCount" />
    </el-col>

    <el-col :span="6">
      <el-statistic title="客户总数" :value="overViewData.totalCustomerCount" />
    </el-col>

    <el-col :span="6">
      <el-statistic :value="overViewData.successTranAmount">
        <template #title>
          <div style="display: inline-flex; align-items: center">
            成交总额
            <el-icon style="margin-left: 4px" :size="12">
              <Male />
            </el-icon>
          </div>
        </template>
        <template #suffix>/{{overViewData.totalTranAmount}}</template>
      </el-statistic>
    </el-col>
  </el-row>
  <br/><br/>

  <!-- 为ECharts准备一个定义了宽高的DOM -->
  <div id="funelChart" style="width: 46%; height: 380px; float: left; margin: auto;">
    销售漏斗图显示在此位置
  </div>

  <!-- 为ECharts准备一个定义了宽高的DOM -->
  <div id="pieChart" style="width: 46%; height: 380px; float: left; margin: auto;">
    线索来源统计饼图显示在此位置
  </div>

  <!-- 为ECharts准备一个定义了宽高的DOM -->
  <div id="barChart" style="clear: both; width: 90%; height: 380px; margin: auto;">
    每月市场活动统计柱状图显示在此位置
  </div>

  <!-- 为ECharts准备一个定义了宽高的DOM -->
  <div id="clueBarChart" style="clear: both; width: 90%; height: 380px; margin: auto;">
    每月市场活动统计柱状图显示在此位置
  </div>

</template>

<style scoped>
.el-row {
  text-align: center;
}
</style>